

import React, { createContext,useReducer } from 'react';
import './App.css'
import Hello from './component/Hello'
import ThemeDemo from './component/theme';

interface IThemeProps {
  [Key:string] : DefaultThemes
}

export const globalThemes:IThemeProps = {
  'light' : {
    color:'#000',
    backgroud:'#eee'
  },
  'dart':{
    color:'#fff',
    backgroud:'#222'
  }
}

interface DefaultThemes  {
  color:string,
  backgroud:string,
  dispatch?: React.Dispatch<{type: string; color: {color:string,backgroud:string}}>
}
const defaultThemes:DefaultThemes = globalThemes.dart

export const UPDATE_COLOR:string = 'UPDATE_COLOR'

const colorReducer = (state: DefaultThemes,action: { type: string; color: DefaultThemes })=>{
  switch (action.type) {
    case UPDATE_COLOR:
        return action.color
    default:
      return state;
  }
}
export const ThemeContext = createContext<DefaultThemes>(defaultThemes)

function App(){
  const [themes,dispatch] = useReducer(colorReducer,globalThemes.dart)
  console.log(themes)
  return (
    <div className = "App-header" style={{background:themes.backgroud}}>
      <ThemeContext.Provider value={{...themes,dispatch:dispatch}}>
        <Hello messge ='hello'></Hello>
        <ThemeDemo></ThemeDemo>
      </ThemeContext.Provider>
    </div>
  )
}

export default App
